<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
	       <h1>第05节--条件渲染</h1>
	       <hr />
	       <h2>1.v-if指令</h2>
	       <h2>#1.1 v-if</h2>
	       <button @click="changeShow" v-if="show">off</button>
	       <button @click="changeShow" v-else>on</button>
	       <h2>#1.2 在template元素上使用v-if渲染分组</h2>
	       <template v-if="show">
	        	<span>group1</span>
	        	<span>group2</span>
	        	<span>group3</span>
	       </template>
	       <hr />
	       <h2>2.v-show指令</h2>
	       <h2 v-show="show">带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display</h2>
	       <hr />
	       <h2>3.当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。不建议一起使用</h2>
		</div>
	</body>
</html>
